<html>
<head><title>welcome</title></head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style>
    .black{  background-image: url(http://s5.51cto.com/wyfs02/M02/73/4B/wKiom1X5NxXxpjKBAADbGtrjmj4613.jpg);  height: 175px;  }
    .listBlack{  background-image: url(http://i44.tinypic.com/33f5ev7.jpg);  }
</style>
<body>
<div class="black">
<div name="t_name" style="float: left;" >
       {{range $index,$v := .}}
       <button name="span_name" onclick="swich({{$v.Name}})" id="name{{$v.Name}}"  {{if  eq .Show true }} style="background-color: brown;" {{end}}>{{$v.Name}}</button>
       &nbsp;
       {{end}}

</div>
<div>
    <button onclick="newJob()" id="newJobButton" style="background-color:greenyellow;">new job</button>&nbsp;
</div>
</div>
</br>
<div id="jobList" class="listBlack">
{{range $index,$v := .}}
<div name="deploy"  id="{{.Name}}" {{if  ne .Show true }} style="display:none;" {{end}}>
 <form action="#" method="post" id="form_{{.Name}}">
         <div>
             <input type="hidden" name="deploy.Name" value="{{.Name}}" />
             <h3>jobName：<label>{{.Name}}</label></h3>
         </div>
     <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
     </br>
        <div>
             <label>ssh.userName</label><input type="text" name="config.User" value="{{.Config.User}}" />
             <label>ssh.password</label><input type="password" name="config.Password" value="{{.Config.Password}}" />
             <label>ssh.ip</label><input type="text" name="config.ip" value="{{.Config.Ip}}" />
        </div>
     <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
     </br>
         <div>
         本地命令
         (多条换行 执行路径;命令;参数(参数用空格隔开) example:E:\github\ticket.h5\web;mvn;clean package -Dmaven.test.skip=true -P artifactory,development -Dfile.encoding=UTF-8 ):
         <textarea name="LocalBefore.Command" class="n" rows="3" cols="200">{{range .LocalBefore}}{{if ne .Path ""}}{{.Path}};{{.Command}};{{range .Args}}{{.}} {{end}}-n-{{end}}{{end}}</textarea>
         </div>
     <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
     </br>
         <div>
             远程命令(多条换行):<textarea name="RemoteBefore.Command" class="n" rows="3" cols="180">{{range .RemoteBefore}}{{.Command}}-n-{{end}}</textarea>
         </div>
     <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
     </br>
         <div>
             上传文件:
             本地目录： <input name="Upload.Path" type="text" size="78" value="{{.UploadJob.LocalPath}}"/>
             远程目录：<input name="Upload.RemotePath" type="text" size="78" value="{{.UploadJob.RemotePath}}"/>
         </div>
     <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
     </br>
         <div>
             本地命令
             (多条换行 执行路径;命令;参数(参数用空格隔开) example:E:\github\ticket.h5\web;mav;clean package -Dmaven.test.skip=true -P artifactory,development -Dfile.encoding=UTF-8 ):
             <textarea name="LocalAfter.Command" class="n" rows="3" cols="200">{{range .LocalAfter}}{{if ne .Path ""}}{{.Path}};{{.Command}};{{range .Args}}{{.}} {{end}}-n-{{end}}{{end}}</textarea>
         </div>
     <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
     </br>
         <div>
             远程命令(多条换行):
             <textarea id="remoteAfter{{$index}}" class="n" name="RemoteAfter.Command" rows="3" cols="180">{{range .RemoteAfter}}{{.Command}}-n-{{end}}</textarea>
         </div>
     <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
     </br>
     <button type="button" onclick="deploy({{.Name}})">deploy</button>&nbsp;<button type="button" onclick="update({{.Name}})">update</button>&nbsp;<button type="button" onclick="deleteJob({{.Name}})">delete</button>
 </form>
</div>
{{end}}
</div>
<div id="newJob" style="display: none" class="listBlack">
    <form action="saveOrUpdate" method="post">
        <div>
            <h3>jobName (不可重复)：<input name="deploy.Name" type="text"  value=""/></h3>
        </div>
        <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
        </br>
        <div>
            <label>ssh.userName:</label><input type="text" name="config.User" />
            <label>ssh.password:</label><input type="password" name="config.Password" />
            <label>ssh.ip:</label><input type="text" name="config.ip" />
        </div>
        <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
        </br>
        <div>
            本地命令
            (多条换行 执行路径;命令;参数(参数用空格隔开) example:E:\github\ticket.h5\web;mvn;clean package -Dmaven.test.skip=true -P artifactory,development -Dfile.encoding=UTF-8 ):
            <textarea name="LocalBefore.Command" rows="3" cols="200"></textarea>
        </div>
        <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
        </br>
        <div>
            远程命令(多条换行):<textarea name="RemoteBefore.Command" rows="3" cols="180"></textarea>
        </div>
        <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
        </br>
        <div>
            上传文件:
            本地目录： <input name="Upload.Path" type="text" size="78" />
            远程目录： <input name="Upload.RemotePath" type="text" size="78"/>
        </div>
        <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
        </br>
        <div>
            本地命令
            (多条换行 执行路径;命令;参数(参数用空格隔开) example:E:\github\ticket.h5\web;mav;clean package -Dmaven.test.skip=true -P artifactory,development -Dfile.encoding=UTF-8 ):
            <textarea name="LocalAfter.Command" rows="3" cols="200"></textarea>
        </div>
        <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
        </br>
        <div>
            远程命令(多条换行):
            <textarea name="RemoteAfter.Command" rows="3" cols="180"></textarea>
        </div>
        <span>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
        </br>
        <button>save</button>&nbsp;
    </form>
</div>

<script>
    var url = window.location.href;
    if(url.indexOf("index")){

    }
$(document).ready(function() {
    var text = $("textarea.n")
    for(var i=0;i<text.length;i++){
        t = $(text[i]).html();
        while (t.indexOf("-n-") > 0){
            t = t.replace("-n-","\r\n");
        }
        $(text[i]).html(t)
    }

});
function swich(name) {
    $("#jobList").attr("style","display:block;")
    $("#newJob").attr("style","display:none;")
    $("[name=span_name]").attr("style","background-color: none;")
    $("#name" + name).attr("style","background-color: brown;");
    $("[name=deploy]").attr("style","display:none;")
    $("#" + name).attr("style","display:block;")
}
function newJob() {
        $("#jobList").attr("style","display:none;")
        $("#newJob").attr("style","display:block;")
    }
function deploy(jobName){
    var form = $("#form_" + jobName);
    $(form).attr("action","deploy");
    $(form).submit();
}
function update(jobName){
    var form = $("#form_" + jobName)
    $(form).attr("action","saveOrUpdate");
    $(form).submit();
}
function deleteJob(jobName){
    var form = $("#form_" + jobName)
    $(form).attr("action","delete");
    $(form).submit();
}
</script>
</body>
</html>